<template>
  <div>
    <div class="header">
      <router-link class="header-btnLeft" :to="'/show/'+goods_id">
        <img src="../assets/back-btn.png">
      </router-link>
      <h1 class="header-title">选择日期/套餐类型/人群</h1>
      <div class="header-btnRight"></div>
    </div>
    <div class="h30"></div>

    <div class="date">
      <div class="date-title">出发日期</div>
      <div class="date-month">
        <iscroll-view
          ref="scrollView"
          class="scroll-view"
          :options="{scrollX: true,preventDefault: false}"
          :scrollerClass="{'scroller':true}"
        >
          <div
            class="month-item"
            :class="[(monthCurr+item > 12 ? (month==monthCurr+item || month == months[monthCurr+item]) : (month==monthCurr+item)) ? 'active': '',monthArr.length > 5 ? 'month-item-more' :'']"
            v-for="(item,index) in monthArr"
          >
            <div @click="chooseMonth(monthCurr+item)">{{months[monthCurr+item]}}月</div>
            <div @click="chooseMonth(monthCurr+item)" class="month-item-price">
              <span v-if="minPriceArr[index].price">¥{{minPriceArr[index].price}}起</span>
              <span v-else>--</span>
            </div>
          </div>
        </iscroll-view>
      </div>

      <div class="date-week">
        <div
          v-for="(item,index) in date"
          :class="(index == todayIndex) && isTodayWeek ? 'weekMark' : ''"
        >{{item}}</div>
      </div>
      <div class="date-box">
        <div
          v-for="(item,index) in selectDates.date_arr"
          class="date-box-item"
          :class="{'nowDay':buyDay == item.isToday, 'smallDay':today > item.isToday }"
          @click="selcetDateValue(index,item.isToday,item.enable)"
        >
          <div class="date-box-item-date" v-if="item.dateNum">{{item.dateNum}}</div>
          <div class="date-box-item-price" v-if="item.ticketNum>0">¥{{item.price}}</div>
          <div class="date-box-item-ticketNum" v-if="item.ticketNum>0">余{{item.ticketNum}}</div>
        </div>
      </div>
    </div>

    <div class="choose">
      <div class="choose-title">套餐类型</div>
      <div class="choose-list">
        <span
          class="choose-list-item"
          :class="[index==names.index ? 'active' : '',item.person.length ? '' : 'disabled']"
          v-for="(item,index) in names.values"
          @click="chooseName(index,item)"
        >{{item.specs_name}}</span>
      </div>
    </div>
    <div class="h30"></div>

    <div class="num" ref="personArr">
      <div class="num-title">选择数量</div>
      <div class="num-buy" v-for="(item,index) in  personArr">
        <div class="num-buy-title">
          {{item.person_name}}：
          <span class="num-buy-title2">余{{item.person_num}}¥{{item.person_price}}</span>
        </div>
        <div class="num-buy-choose">
          <div class="num-buy-choose-but" @click="subNum(index,item)">－</div>
          <input class="num-buy-choose-num" :value="item.person_num_buy" readonly>
          <div class="num-buy-choose-but" @click="addNum(index,item)">＋</div>
        </div>
      </div>
    </div>

    <div class="h120"></div>
    <div class="integral">完成订单可获得
      <span class="integral-green">{{integral}}</span> 积分回赠
    </div>

    <div class="buyBar">
      <div class="buyBar-item">
        <div class="buyBar-item-title">总价</div>
        <div class="buyBar-item-price">¥ {{totalPrice}}</div>
      </div>
      <div v-if="goods_status==1" class="buyBar-buy" @click="buyPost">立即预订</div>
      <div v-else class="buyBar-buy">商品已下架</div>
    </div>
  </div>
</template>

<script>
    import {Toast, MessageBox, Indicator} from 'mint-ui';
    import storage from '../store/localstorage';
    import config from '../store/config';
    import serve from '../store/serve';
    import wxShare from "../store/wxShare"

    export default {
        name: "Show-buy",
        data() {
            return {
                // 日期选择器
                year: 0,
                month: 0,
                today: 0,
                date: ['日', '一', '二', '三', '四', '五', '六'],
                monthCurr: 0,
                today: '',
                TodayText: '',
                priceArr: [],
                minPriceArr: [], //每月最低价
                isTodayWeek: false,
                todayIndex: '',
                totalPrice: 0, //总价
                totalNum: 0, //总数量
                integral: 0, //积分
                buyDay: '', //出发日期
                price: 0, //默认价格
                ticketNum: 0, //默认数量
                months: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                personArr: [], //人群、数量
                selectDates: {
                    date_arr: [],
                    index: 0
                },
                names: {
                    values: [],
                    index: null
                },
                typesource: '', //标记三方订单
                specs_id: 0, //被选中套餐id
                goods_id: '',
                title: '',
                goods_status: 1,
                swiper: {
                    data: [],
                    auto: 3000,
                },
                domScrollTop: 600,//套餐选中滚动位置
                monthArr:[],
            }
        },
        updated () {
            this.$refs.scrollView.refresh();
        },
        methods: {
            // 购买
            buyPost() {

                if (this.totalNum < 1) {
                    Toast({message: '请选择购买数量', duration: 1000});
                    return;
                }

                if (this.totalPrice <= 0) {
                    Toast({message: '免费商品不能单独售卖', duration: 1000});
                    return;
                }
                let _buyday = this.buyDay.replace(/[^0-9]/ig,"");
                let _today = this.today.replace(/[^0-9]/ig,"");
                if(_buyday-_today <= 1){
                    MessageBox({
                        title: '提示',
                        message: "距出行日期不足48小时，该订单预定成功后将不能退改！是否继续？",
                        confirmButtonText:'继续',
                        showCancelButton: true,
                        closeOnClickModal:false,
                    }).then(res=>{
                        if(res=='confirm'){
                            this.isGoShowOrder();
                        }else{
                            return;
                        }
                    });
                }else{
                    this.isGoShowOrder();
                };             
            },
            isGoShowOrder(){
                var params = {
                    goods_id: this.goods_id,
                    totalPrice: this.totalPrice,
                    integral: this.integral,
                    buyDay: this.buyDay,
                    totalNum: this.totalNum,
                    specs_id: this.names.values[this.names.index].specs_id,
                    code: this.names.values[this.names.index].gradeCode ? this.names.values[this.names.index].gradeCode :"",
                    gradeName : this.names.values[this.names.index].specs_name,
                    personArr: this.personArr,
                    typesource: this.typesource
                }
                this.axios.post('waporderindex', params).then((res) => {
                    if (res.data == 1) {
                        MessageBox(res.msg).then(res=>{
                            if(res=='confirm'){
                                this.$router.push({path: '/my-order'})
                            }
                        });
                    } else {
//                      this.$router.push({path:'/show-order',query: { order_id: res.data.order_id,goods_id: this.goods_id,orderType:res.data.orderType,order_no:res.data.order_no}})
                        window.location.href = config.url + '/quick_help_wap1/#/show-order?uid=' + serve.getParam('uid') + '&order_id=' + res.data.order_id+ '&goods_id=' + this.goods_id +'&orderType='+res.data.orderType+'&order_no='+res.data.order_no
                    }
                }).catch(err => console.log(err))
            },
            //日期选择器
            dateInit(setYear, setMonth) {
                var _that = this;
                //全部时间的月份都是按0~11基准，显示月份才+1
                let dateArr = []; //需要遍历的日历数组数据
                let arrLen = 0; //dateArr的数组长度
                let now = setYear ? new Date(setYear, setMonth) : new Date();
                let year = setYear || now.getFullYear();
                let nextYear = 0;
                let month = setMonth || now.getMonth(); //没有+1方便后面计算当月总天数
                let nextMonth = (month + 1) > 11 ? 1 : (month + 1);
                let startWeek = new Date(year + '/' + (month + 1) + '/' + 1).getDay(); //目标月1号对应的星期
                let dayNums = new Date(year, nextMonth, 0).getDate(); //获取目标月有多少天
                let obj = {};
                let num = 0;
                if (month + 1 > 11) {
                    nextYear = year + 1;
                    dayNums = new Date(nextYear, nextMonth, 0).getDate();
                }

                arrLen = startWeek + dayNums;
                //arrLen = dayNums;
                for (let i = 0; i < arrLen; i++) {
                    if (i >= startWeek) {
                        num = i - startWeek + 1;
                        let TodayText = new String(year + '-');
                        TodayText += (month + 1) < 10 ? '0' + (month + 1) : month + 1;
                        TodayText += '-'
                        TodayText += (num < 10) ? '0' + num : num;
                        let price = _that.price;
                        let ticketNum = _that.ticketNum;
                        let enable = 0;
                        for (let j = 0; j < _that.priceArr.length; j++) {
                            if (TodayText == _that.priceArr[j].time) {
                                price = parseInt(_that.priceArr[j].min_price)
                                ticketNum = _that.priceArr[j].number;
                                enable = 1;
                            }
                        }
                        obj = {
                            isToday: TodayText,
                            dateNum: num,
                            price: price,
                            ticketNum: ticketNum,
                            enable: enable,
                        }
                    } else {
                        obj = {};
                    }
                    dateArr[i] = obj;
                }
                // console.log(dateArr);
                _that.selectDates.date_arr = dateArr;
                _that.personArr = [];//清空默认价格
                _that.buyDay = '';//清空购买日期


                let nowDate = new Date();
                let nowYear = nowDate.getFullYear();
                let nowMonth = nowDate.getMonth() + 1;
                let nowWeek = nowDate.getDay();
                let getYear = setYear || nowYear;
                let getMonth = setMonth >= 0 ? (setMonth + 1) : nowMonth;

                if (nowYear == getYear && nowMonth == getMonth) {
                    _that.isTodayWeek = true;
                    _that.todayIndex = nowWeek;
                } else {
                    _that.isTodayWeek = false;
                    _that.todayIndex = -1;
                }

            },
            chooseMonth(val) {
                let month = val;
                let year = 0;
                if(month>12){
                    year = this.year + 1;
                    this.month = Math.abs(month-12);
                    month=this.month;
                }else{
                    this.month =month;
                    year = this.year;
                }
                this.dateInit(year, month - 1);
            },
            lastMonth() {
                //全部时间的月份都是按0~11基准，显示月份才+1
                let year = this.month - 2 < 0 ? this.year - 1 : this.year;
                let month = this.month - 2 < 0 ? 11 : this.month - 2;
                this.year = year
                this.month = month + 1
                this.dateInit(year, month);
            },
            nextMonth() {
                //全部时间的月份都是按0~11基准，显示月份才+1
                let year = this.month > 11 ? this.year + 1 : this.year;
                let month = this.month > 11 ? 0 : this.month;
                this.year = year;
                this.month = month + 1;
                this.dateInit(year, month);
            },
            selcetDateValue: function (index, isToday, enable) {
                if (enable != 1) {
                    Toast({
                        message: '请选择有效日期',
                        duration: 1000
                    });
                    return false
                }
                let _that = this;
                let dateSelect = isToday;
                let dateToday = _that.today;

                let d1 = new Date(dateToday.replace(/\-/g, "\/"));
                let d2 = new Date(dateSelect.replace(/\-/g, "\/"));

                if (d2 < d1) {
                    Toast({
                        message: '选择日期不可用',
                        duration: 1000
                    });
                    return false
                }
                _that.buyDay = dateSelect;
                
                let params = {
                    goods_id: _that.goods_id,
                    time: isToday
                }
                _that.axios.post('wapspec_person', params)
                    .then(res => {
                        _that.names.values = res.data.specs;
                        if(res.data.specs.length > 0 && res.data.specs[0].person.length > 0){
                            _that.names.index = 0;
                            _that.personArr = res.data.specs[0].person;
                            _that.personArr.forEach((element,i) => {
                                element.person_num_buy = 0;
                            });
                            _that.totalPriceFun();// 计算总价
                            _that.goScroll();
                        }else{
                            _that.names.index = null;
                        }
                    })
                    .catch(err => console.log(err));
            },
            // 滚动
            goScroll() {
                this.domScrollTop = this.$refs.personArr.offsetTop; //获取滚动位置
                document.body.scrollTop = document.documentElement.scrollTop = this.domScrollTop - 200;
            },
            // 减少购买量
            subNum(index,item) {
                let index_val = index;
                var personArr = this.personArr;
                if (personArr[index_val].person_num_buy <= 0) {
                    Toast({
                        message: '数量不能小于0',
                        duration: 1000
                    });
                } else {
                    if(item.minorder_num){
                        if(personArr[index_val].person_num_buy == item.minorder_num){
                            personArr[index_val].person_num_buy -= item.minorder_num;
                            personArr[index_val].person_num += item.minorder_num;
                        }else{
                            personArr[index_val].person_num_buy -= item.inc_order_num;
                            personArr[index_val].person_num += item.inc_order_num;

                            if(personArr[index_val].person_num_buy < item.minorder_num){
                              personArr[index_val].person_num -= (item.minorder_num-personArr[index_val].person_num_buy);
                              personArr[index_val].person_num_buy = item.minorder_num;
                            }
                        }
                        this.personArr = personArr
                        this.totalPriceFun();// 计算总价
                    }else{
                        personArr[index_val].person_num_buy -= item.inc_order_num;
                        personArr[index_val].person_num += item.inc_order_num;
                        
                        if(personArr[index_val].person_num_buy <= 0){
                          personArr[index_val].person_num += personArr[index_val].person_num_buy;
                          personArr[index_val].person_num_buy = 0;
                        }
                        this.personArr = personArr
                        this.totalPriceFun();// 计算总价
                    }
                }
            },
            //增加数量
            addNum(index,item) {
                let index_val = index;
                var personArr = this.personArr;
                if (personArr[index_val].person_num <= 0) {
                    Toast({message: '没有余票啦', duration: 1000});
                } else if (personArr[index_val].person_num_buy >= personArr[index_val].max && personArr[index_val].max > 0) {
                    Toast({message: '最多能购买' + personArr[index_val].max + '张票', duration: 1000});
                } else {
                    if(item.minorder_num){
                        if(personArr[index_val].person_num_buy == 0){
                            personArr[index_val].person_num_buy += item.minorder_num;
                            personArr[index_val].person_num -= item.minorder_num;
                        }else{
                            personArr[index_val].person_num_buy += item.inc_order_num;
                            personArr[index_val].person_num -= item.inc_order_num;
                            
                            if(personArr[index_val].person_num <= 0){
                              personArr[index_val].person_num_buy += personArr[index_val].person_num;
                              personArr[index_val].person_num = 0;
                            }
                        }
                        this.personArr = personArr
                        this.totalPriceFun();// 计算总价
                    }else{
                        personArr[index_val].person_num_buy += item.inc_order_num;
                        personArr[index_val].person_num -= item.inc_order_num;

                        if(personArr[index_val].person_num <= 0){
                          personArr[index_val].person_num_buy += personArr[index_val].person_num;
                          personArr[index_val].person_num = 0;
                        }
                        this.personArr = personArr
                        this.totalPriceFun();// 计算总价
                    }
                }
            },
            // 计算总价
            totalPriceFun() {
                var _that = this;
                var totalPrice = 0, totalNum = 0;
                let personArr = _that.personArr;


                for (var i = 0; i < personArr.length; i++) {
                    totalPrice += personArr[i].person_price * personArr[i].person_num_buy
                    totalNum += personArr[i].person_num_buy
                }

                var integralInfo = storage.get('product_integra') || 100
                var integralInfoNum = integralInfo.integral_sum / integralInfo.integra
                let integral = Math.ceil(totalPrice / parseInt(integralInfoNum));  //积分


                _that.totalPrice = totalPrice.toFixed(2);
                _that.totalNum = totalNum;
                _that.integral = integral;
            },
            getData() {
                let _that = this;
                let params = {
                    goods_id: _that.goods_id
                }
                Indicator.open({spinnerType: 'fading-circle'});
                _that.axios.post('wapinterval', params)
                    .then(res => {
                        Indicator.close();
                        if(res.data.code==101){
                            Toast({message: res.msg, duration: 50000});
                            _that.$router.go(-1);
                        }else{
                            var datas = res.data;
                            _that.typesource = datas.typesource //标记三方订单
                            let monthArr = [];
                            let yearArr = [];
                            for (var i = 0; i < datas.riqijiage.length; i++) { //遍历取后台传递的价格月份
                                monthArr[i] = Number(datas.riqijiage[i].time.split('-')[1]);
                                yearArr[i] = Number(datas.riqijiage[i].time.split('-')[0]);
                            }
                            // 如果后台价格起始月份与当前月份有差异，自动补充中间缺少月份
                            // 目前保留前端判断当前月份及日期逻辑，后期讨论后可以移除前端日期逻辑 -- garen
                            // monthArr = Array.from(new Set(monthArr)).sort((a, b) => a - b);
                            // let minMonth = monthArr[0];
                            // if(this.month < minMonth){
                            //     for(let m = this.month; m < minMonth; m++){
                            //         monthArr.unshift(m);
                            //     }
                            // }
                            // console.log(minMonth)
                            // console.log(monthArr)

                            // this.monthArr = monthArr.map((item,j)=>{return j});
                            monthArr = Array.from(new Set(monthArr));
                            yearArr = Array.from(new Set(yearArr)).sort((a, b) => b - a);
                            let lastMonth = monthArr[monthArr.length-1];
                            let maxYear = yearArr[0];
                            let newMonthArr = []
                            let setYearNum = (maxYear-this.year)*12 + lastMonth - this.month + 1;
                            for(let m = 0; m < setYearNum; m++){
                                newMonthArr.push(m);
                            }
                            this.monthArr = newMonthArr;
                            _that.priceArr = datas.riqijiage; //设置价格
                            _that.getMonthMinPrice();
                            //初始化日期选择器
                            _that.dateInit();
                            //初始化总价
                            _that.totalPriceFun();
                        }
                    })
                    .catch(err => console.log(err));
            },
            //计算当月最低价格
            getMonthMinPrice() {
                var _that = this;
                var month = _that.month;
                var priceArr = _that.priceArr;
                var minPriceArr = [];
                var monthCurr = 0;
                for (var i = month; i <= month+_that.monthArr.length; i++) {

                    if (i > 12) {
                        monthCurr = i - 12;
                    } else {
                        monthCurr = i;
                    }
                    var monthCurrPrice = 0;
                    var monthCurrtext = monthCurr;
                    let monthMinPriceArr = new Array();
                    for (var j = 0; j < priceArr.length; j++) {
                        if (priceArr[j].time) {
                            var arr = priceArr[j].time.split("-")
                            if (monthCurr == arr[1]) {
                                monthMinPriceArr.push(priceArr[j].min_price);
                                monthCurrPrice = Math.min(...monthMinPriceArr);
                                monthCurrtext = monthCurr;
                            }
                        }
                    }
                    // console.log(monthCurrtext,parseInt(monthCurrPrice))
                    minPriceArr.push({month: monthCurrtext, price: parseInt(monthCurrPrice)})
                }
                _that.minPriceArr = minPriceArr

            },
            // 选择套餐
            chooseName(index, item) {
                // let now = new Date();
                // let year = now.getFullYear();
                // let month = now.getMonth() + 1;
                // let monthCurr = month;
                // this.names.index = index;
                // this.year = year;
                // this.month = month;
                // this.monthCurr = monthCurr;
                if(!item.person.length){
                    return;
                }
                this.specs_id = item.specs_id;
                this.names.index = index;
                this.personArr = this.names.values[index].person;
                this.personArr.forEach((element,i) => {
                    element.person_num_buy = 0;
                });
                // this.goScroll();  //滚动
                this.totalPriceFun();// 计算总价
            },
            getProduct() {
                let _that = this;
                let params = {
                    goods_id: _that.goods_id,
                }
                _that.axios.post('wapgoodsdetails', params)
                    .then(res => {
                        _that.title = res.data.title;
                        _that.goods_status = res.data.goods_status;
                        if (res.data.img.image) {
                            var swImgRes = res.data.img.image
                            var swImgArr = []
                            for (var item in swImgRes) {
                                if (swImgRes[item].search(/^(http|https):\/\//) == -1) {
                                    swImgArr.push({src: config.url + swImgRes[item]})
                                } else {
                                    swImgArr.push({src: swImgRes[item]})
                                }
                            }
                            _that.swiper.data = swImgArr//轮播图
                        }
                        _that.share();
                    })
                    .catch(err => console.log(err));
            },
            // 分享
            share() {
                wxShare({
                    title: '选择套餐类型/日期/人群', // 分享标题
                    desc: this.title, // 分享描述
                    imgUrl: this.swiper.data[0].src, // 分享图标
                    debug: false
                }, function () {
                    console.log('分享成功')
                });
            }
        },
        mounted() {

            var _that = this;

            _that.goods_id = _that.$route.params.id;

            //日期选择器参数
            let now = new Date();
            let year = now.getFullYear();
            let month = now.getMonth() + 1;
            let monthCurr = month;
            let day = now.getDate();

            let TodayText = new String(year + '-');
            TodayText += (month < 10) ? '0' + month : month;
            TodayText += '-'
            TodayText += (day < 10) ? '0' + day : day;


            _that.year = year;
            _that.month = month;
            _that.monthCurr = monthCurr;
            _that.today = TodayText;
            _that.buyDay = TodayText;
            _that.getData();

            setTimeout(()=>{
                _that.getProduct(); //产品信息
            },100)
        }
    }
</script>

<style lang="scss" scoped>
@import "../assets/base";

.h30 {
  height: rpx(30);
  background: $bgcolor1;
}

.h120 {
  height: rpx(480);
  background: $bgcolor1;
}

.page-title {
  font-size: rpx(40);
  padding: rpx(30);
  border-bottom: solid 1px $color2;
  text-align: center;
}

.header {
  display: flex;
  align-items: center;
  padding: rpx(30);
  justify-content: space-between;
  background: $color0;
  &-btnLeft {
    width: rpx(64);
    height: rpx(64);
    padding-top: rpx(16);
    img {
      width: rpx(32);
      height: rpx(32);
    }
  }
  &-btnRight:after {
    display: block;
    content: " ";
    width: rpx(64);
    height: rpx(64);
  }
  &-title {
    flex: 1;
    font-size: rpx(36);
    text-align: center;
    font-weight: normal;
  }
}

.choose {
  padding: rpx(30) 0 rpx(30) rpx(30);
  &-title {
    padding: rpx(20) 0;
    font-size: rpx(36);
  }
  &-list {
    padding-top: rpx(20);
    display: flex;
    flex-wrap: wrap;
    &-item {
      margin-right: rpx(30);
      margin-bottom: rpx(30);
      padding: rpx(20);
      border: solid 1px #fbde9d;
      background: #fffbf2;
      border-radius: $radius6;
      overflow: hidden;
      max-width: rpx(600);
      font-size: rpx(28);
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .active {
      border: solid 1px $color3;
      background: $color3;
      color: $color0;
    }
    .disabled {
      border: solid 1px #e9e9eb;
      background: #f4f4f5;
      color: #bcbec2;
      cursor: not-allowed;
    }
  }
}

.date {
  &-title {
    padding: rpx(50) rpx(30) rpx(10);
    font-size: rpx(36);
  }
  // &-month {
  //     display: flex;
  //     padding: 0 rpx(30);
  //     &-item {
  //         flex: 1;
  //         padding: rpx(20) 0;
  //         font-size: rpx(30);
  //         color: $color5;
  //         text-align: center;
  //         &-price {
  //             font-size: rpx(24);
  //         }
  //     }
  //     .active {
  //         font-weight: bold;
  //         color: $color1;
  //         border-bottom: solid rpx(2) $color3;
  //         &-price {
  //             font-size: rpx(24);
  //             color: $color1;
  //         }
  //     }
  // }
  &-month {
    padding: 0 rpx(30);
    position: relative;
    z-index: 1;
    .scroll-view {
      touch-action: none;
      -webkit-transform: translate3d(0, 0, 0);
      overflow: hidden;
      z-index: 1;
    }
    .scroller,
    ul.tabs {
      display: inline-flex;
      align-items: center;
      height: rpx(100);
      .month-item {
        &-price {
          font-size: rpx(24);
        }
        position: relative;
        box-sizing: border-box;
        margin-right: rpx(30);
        // line-height: rpx(100);
        height: rpx(95);
        font-size: rpx(30);
        color: $color5;
        white-space: nowrap;
        padding: rpx(20) rpx(10);
        text-align: center;
      }
      .month-item-more {
        min-width: rpx(126);
      }
      .active {
        font-weight: bold;
        color: $color1;
        border-bottom: solid rpx(2) $color3;
        &-price {
          font-size: rpx(24);
          color: $color1;
        }
      }
    }
  }

  &-week {
    display: flex;
    border-top: solid 1px $color2;
    border-bottom: solid 1px $color2;
    align-items: center;
    div {
      flex: 1;
      color: $color5;
      font-size: rpx(26);
      text-align: center;
      height: rpx(64);
      line-height: rpx(64);
    }
  }

  &-box {
    display: flex;
    flex-wrap: wrap;
    &-item {
      width: 14.285%;
      padding: rpx(10) 0;
      text-align: center;
      &-date {
        font-size: rpx(30);
        color: $color1;
        font-weight: bold;
      }
      &-price {
        font-size: rpx(24);
        color: $color3;
        padding: rpx(6) 0;
      }
      &-ticketNum {
        font-size: rpx(24);
        color: $color5;
      }
    }
    .nowDay {
      background: $color3;
      border-radius: $radius6;
      > div {
        color: $color0;
      }
    }
    .smallDay {
      > div {
        color: $color5;
      }
    }
  }
}

.num {
  &-title {
    padding: rpx(30);
    font-size: rpx(36);
  }
  &-buy {
    display: flex;
    padding: rpx(20) rpx(30);
    border-bottom: solid 1px $color2;
    &-title {
      flex: 1;
      font-size: rpx(28);
      line-height: 130%;
    }
    &-title2 {
      color: $color5;
    }
    &-choose {
      display: flex;
      align-items: center;
      width: rpx(180);
      &-but {
        width: rpx(50);
        height: rpx(50);
        line-height: rpx(50);
        overflow: hidden;
        text-align: center;
        font-size: rpx(50);
      }
      &-num {
        border: none;
        width: rpx(80);
        height: rpx(50);
        background: $bgcolor1;
        text-align: center;
        font-size: rpx(40);
        font-weight: bold;
      }
    }
  }
}

.ticket {
  &-title {
    padding: rpx(30);
    font-size: rpx(36);
  }

  &-list {
    position: absolute;
    top: rpx(188);
    right: 0;
    left: 0;
    padding: rpx(30) 0 rpx(60);
    background: $color0;
    z-index: 9999;
    &-item {
      display: flex;
      align-items: center;
      padding: rpx(20) rpx(30);
      font-size: rpx(30);
      border-bottom: solid 1px $color2;

      &-left {
        font-size: rpx(24);
        color: $color5;
        padding-right: rpx(60);
        &-price {
          font-size: rpx(48);
          color: $color3;
        }
      }
      &-left2 {
        flex: 1;
        font-size: rpx(24);
        color: $color5;
        &-price {
          font-size: rpx(48);
          color: $color3;
        }
      }
      &-img {
        width: rpx(32);
        height: rpx(32);
      }
    }
  }
}

.integral {
  position: fixed;
  z-index: 9999;
  left: 0;
  right: 0;
  bottom: rpx(92);
  padding: rpx(20) rpx(30);
  background: $color0;
  border-top: $color2 solid 1px;
  font-size: rpx(28);
  color: $color5;
  &-green {
    color: $color4;
  }
}

//底部
.buyBar {
  position: fixed;
  z-index: 9999;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: $color2 solid 1px;
  background: $color0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  &-item {
    flex: 1;
    height: rpx(90);
    &-title {
      padding: rpx(10) 0 0 rpx(30);
      font-size: rpx(24);
    }
    &-price {
      padding-left: rpx(30);
      font-size: rpx(40);
      color: $color3;
    }
  }
  &-item:last-child {
    border-right: none;
  }
  &-buy {
    width: rpx(300);
    height: rpx(90);
    line-height: rpx(90);
    background: linear-gradient(to left, #ff5722, #ffc000);
    text-align: center;
    font-size: rpx(40);
    color: $color0;
  }
  &-active {
    color: $color3;
  }
}
</style>